<doubaocanvas-part language="html" path="index.html" description="在线考试系统老师端登录页面代码">
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/flowbite@1.8.1/dist/flowbite.min.css" />
    <title>在线考试系统 - 老师端</title>
    <style>
      /* 侧边栏链接悬停动画 */
      .sidebar-link:hover {
        transform: translateX(5px);
        transition: transform 0.3s ease;
      }
      /* 按钮动画 */
      .btn {
        transition: background-color 0.3s ease;
      }
      /* 输入框聚焦样式 */
      input:focus,
      select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba (59, 130, 246, 0.2);
      }
      /* 整体浅蓝色背景 */
      body {
        background-color: #e0f7fa;
      }
      /* 左侧栏布局 */
      .sidebar {
        height: 100vh;
        width: 30%;
        background-color: #00838f;
        color: white;
        display: flex;
        flex-direction: column;
      }
      .sidebar-title {
        height: 15%;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        font-size: 1.5rem;
        font-weight: bold;
      }
      .sidebar-item {
        height: 10%;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        cursor: pointer;
      }
      /* 表格样式优化 */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
      }
      th,
      td {
        border: 1px solid #ccc;
        padding: 0.5rem;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
  <div class="flex h-screen">
    <!-- 左侧栏 -->
    <div class="sidebar">
      <div class="sidebar-title">老师端</div>
      <a href="#" onclick="showContent('exam-management'); return false;" class="sidebar-item sidebar-link">
        <i class="fa-solid fa-clipboard-list mr-2"></i>
        考试管理
      </a>
      <a href="#" onclick="showContent('paper-management'); return false;" class="sidebar-item sidebar-link">
        <i class="fa-solid fa-file-lines mr-2"></i>
        试卷管理
      </a>
      <a href="#" onclick="showContent('grade-query'); return false;" class="sidebar-item sidebar-link">
        <i class="fa-solid fa-chart-bar mr-2"></i>
        成绩查询
      </a>
      <a href="#" onclick="showContent('course-management'); return false;" class="sidebar-item sidebar-link">
        <i class="fa-solid fa-book mr-2"></i>
        课程管理
      </a>
      <a href="#" onclick="showContent('subject-info'); return false;" class="sidebar-item sidebar-link">
        <i class="fa-solid fa-info-circle mr-2"></i>
        科目信息查看
      </a>
    </div>
    <!-- 主内容区 -->
    <div class="w-7/12 p-8">
      <div id="exam-management" class="main-content">
        <h1 class="text-3xl font-bold mb-4">考试管理 - 发布随机考试</h1>
        <form class="space-y-4">
          <div class="relative">
            <label for="exam-name" class="block text-gray-700 font-bold mb-2">考试名称</label>
            <input type="text" id="exam-name" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <label for="course" class="block text-gray-700 font-bold mb-2">所属课程</label>
            <select id="course" class="w-full border border-gray-300 p-2 rounded">
              <option value="course1">课程 1</option>
              <option value="course2">课程 2</option>
              <option value="course3">课程 3</option>
            </select>
          </div>
          <div class="relative">
            <label for="start-time" class="block text-gray-700 font-bold mb-2">开始时间</label>
            <input type="datetime-local" id="start-time" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <label for="end-time" class="block text-gray-700 font-bold mb-2">结束时间</label>
            <input type="datetime-local" id="end-time" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <label for="question-count" class="block text-gray-700 font-bold mb-2">随机题目数量</label>
            <input type="number" id="question-count" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <button type="submit" class="btn bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">发布考试</button>
          </div>
        </form>
      </div>
      <div id="paper-management" class="main-content" style="display: none;">
        <h1 class="text-3xl font-bold mb-4">试卷管理</h1>
        <div class="overflow-x-auto">
          <table class="table-auto">
            <thead>
            <tr>
              <th class="px-4 py-2">试卷编号</th>
              <th class="px-4 py-2">试卷名称</th>
              <th class="px-4 py-2">所属课程</th>
              <th class="px-4 py-2">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="px-4 py-2">1</td>
              <td class="px-4 py-2">数学试卷 1</td>
              <td class="px-4 py-2">高等数学</td>
              <td class="px-4 py-2">
                <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded">编辑</button>
                <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">删除</button>
              </td>
            </tr>
            <tr>
              <td class="px-4 py-2">2</td>
              <td class="px-4 py-2">英语试卷 1</td>
              <td class="px-4 py-2">大学英语</td>
              <td class="px-4 py-2">
                <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded">编辑</button>
                <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2">删除</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="grade-query" class="main-content" style="display: none;">
        <h1 class="text-3xl font-bold mb-4">成绩查询</h1>
        <div class="overflow-x-auto">
          <table class="table-auto">
            <thead>
            <tr>
              <th class="px-4 py-2">学生姓名</th>
              <th class="px-4 py-2">考试名称</th>
              <th class="px-4 py-2">课程名称</th>
              <th class="px-4 py-2">成绩</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="px-4 py-2">张三</td>
              <td class="px-4 py-2">数学考试 1</td>
              <td class="px-4 py-2">高等数学</td>
              <td class="px-4 py-2">85</td>
            </tr>
            <tr>
              <td class="px-4 py-2">李四</td>
              <td class="px-4 py-2">英语考试 1</td>
              <td class="px-4 py-2">大学英语</td>
              <td class="px-4 py-2">90</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="course-management" class="main-content" style="display: none;">
        <h1 class="text-3xl font-bold mb-4">课程管理</h1>
        <form class="space-y-4">
          <div class="relative">
            <label for="course-name" class="block text-gray-700 font-bold mb-2">课程名称</label>
            <input type="text" id="course-name" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <label for="teacher-name" class="block text-gray-700 font-bold mb-2">授课教师</label>
            <input type="text" id="teacher-name" class="w-full border border-gray-300 p-2 rounded">
          </div>
          <div class="relative">
            <button type="submit" class="btn bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">添加课程</button>
          </div>
        </form>
      </div>
      <div id="subject-info" class="main-content" style="display: none;">
        <h1 class="text-3xl font-bold mb-4">科目信息查看</h1>
        <table class="min-w-full border-collapse border border-gray-300">
          <thead>
          <tr>
            <th class="border border-gray-300 p-2">科目编号</th>
            <th class="border border-gray-300 p-2">科目名称</th>
            <th class="border border-gray-300 p-2">学分</th>
            <th class="border border-gray-300 p-2">授课教师</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td class="border border-gray-300 p-2">001</td>
            <td class="border border-gray-300 p-2">高等数学</td>
            <td class="border border-gray-300 p-2">4</td>
            <td class="border border-gray-300 p-2">张老师</td>
          </tr>
          <tr>
            <td class="border border-gray-300 p-2">002</td>
            <td class="border border-gray-300 p-2">大学英语</td>
            <td class="border border-gray-300 p-2">3</td>
            <td class="border border-gray-300 p-2">李老师</td>
          </tr>
          <tr>
            <td class="border border-gray-300 p-2">003</td>
            <td class="border border-gray-300 p-2">计算机基础</td>
            <td class="border border-gray-300 p-2">3</td>
            <td class="border border-gray-300 p-2">王老师</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/flowbite@1.8.1/dist/flowbite.js"></script>
  <script>
    function showContent(contentId) {
      const contents = document.querySelectorAll('.main-content');
      contents.forEach(content => {
        content.style.display = 'none';
      });
      const targetContent = document.getElementById(contentId);
      if (targetContent) {
        targetContent.style.display = 'block';
      }
    }
    document.addEventListener('DOMContentLoaded', function () {
      showContent('exam-management');
    });
  </script>
  </body>
  </html>
</doubaocanvas-part>
</doubaocanvas>